<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to HTML</title>
<meta charset="utf-8">
<link rel="stylesheet"
	href="https://runetranscriber.googlecode.com/svn/trunk/core/doc/includes/style.css">

<script src="js/util/Logger.js"></script>
<script src="js/util/HtmlUtilities.js"></script>

<script src="js/EnglishTengwarTranscriber2.js"></script>
<script src="js/TengwaRune.js"></script>

<script src="js/example/TengwarExampleToHtml.js"></script>
<script src="js/example/TengwarExampleTLOTR2.js"></script>
<script src="js/example/TengwarExampleTS1.js"></script>
<script src="js/example/TengwarExampleTS2.js"></script>
<script src="js/example/TengwarExampleUTONAME1.js"></script>
<script src="js/example/TengwarExampleUTONAME2.js"></script>
<script src="js/example/TengwarExampleTROTS1.js"></script>
<script src="js/example/TengwarExampleTROTS2.js"></script>
<script src="js/example/TengwarExampleTTOI1.js"></script>
<script src="js/example/TengwarExampleTTOI2.js"></script>
<script src="js/example/TengwarExampleTWOTR1.js"></script>
<script src="js/example/TengwarExampleTWOTR2.js"></script>
<script src="js/example/TengwarExampleSD1.js"></script>
<script src="js/example/TengwarExampleSD2.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
	<figure class="center">
		<img id="image" width="700"></img>
	</figure>
	<br />
	<table id="line1Table" class="center table-details">
	</table>
	<br />
	<table id="line2Table" class="center table-details">
	</table>
	<br />
	<table id="line3Table" class="center table-details">
	</table>
	<script>
        "use strict";
        var LOGGER = new Logger();
        LOGGER.setTraceEnabled(false);

        var example = TengwarExampleTLOTR2;
        // var example = TengwarExampleTS1;
        // var example = TengwarExampleTS2;
        // var example = TengwarExampleUTONAME1;
        // var example = TengwarExampleUTONAME2;
        // var example = TengwarExampleTROTS1;
        // var example = TengwarExampleTROTS2;
        // var example = TengwarExampleTTOI1;
        // var example = TengwarExampleTTOI2;
        // var example = TengwarExampleTWOTR1;
        // var example = TengwarExampleTWOTR2;
        // var example = TengwarExampleSD1;
        // var example = TengwarExampleSD2;

        document.getElementById("image").src = example.IMAGE;

        var lines = splitOnNewline(example.RUNES);
        // LOGGER.debug("lines.length = " + lines.length);

        for (var i = 0; i < lines.length; i++)
        {
            var generator = new TengwarExampleToHtml(lines[i]);

            var text = "";
            text += generator.generateFontRows();
            text += generator.generateRuneRows();
            text += generator.generatePhonemeRows();
            text += generator.generateLanguageRows();
            console.info(text);

            var elementId = "line" + (i + 1) + "Table";
            document.getElementById(elementId).innerHTML = text;
        }

        function splitOnNewline(runes)
        {
            var answer = [];

            var start = 0;
            var index = runes.indexOf(TengwaRune.NEWLINE, start);
            // LOGGER.debug("start, index = " + start + ", " + index);

            while (index >= 0)
            {
                answer[answer.length] = runes.slice(start, index);
                start = index + 1;
                index = runes.indexOf(TengwaRune.NEWLINE, start);
                // LOGGER.debug("start, index = " + start + ", " + index);
            }

            answer[answer.length] = runes.slice(start);

            return answer;
        }
    </script>
</body>
</html>
